<template>
	<view>
		<!-- 自定义顶部 -->
		<u-navbar style="background-color: #007AFF;" :is-back="false" title="邀请有礼">
			<view class="slot-wrap">
				<u-icon name="arrow-left" style="margin-left: 10rpx;" @tap="getBack" size="45"></u-icon>
				<view class="coupons_left_line"></view>
				<u-icon name="home" @tap="home"  size="40"></u-icon>
			</view>
		</u-navbar>
		<!-- end -->
		<view class="invit">
			<!-- <image src="../../../static/mine/yao.png" mode="widthFix"></image> -->
		</view>
		<view class="invit_with">
			<view class="invit_he">
				<view class="" style="width: 100%;">
					<u-row :gutter="12">
						<u-col :span="4" style="text-align: center;">
							<image class="wx" src="../../../static/mine/top.png"></image>
							<button class="contacButton" open-type="share">微信好友</button>
						</u-col>
						<u-col :span="4">
							<image class="wx" src="../../../static/mine/top.png"></image>
							<button class="contacButton">面对面邀请</button>
						</u-col>
						<u-col :span="4">
							<image class="wx" src="../../../static/mine/top.png"></image>
							<button class="contacButton">微信朋友圈</button>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- end -->
			<view class="invit_he marTop20">
				<view style="color: #FF6600;font-size: 33rpx;">活动规则：</view>
				<view class="marTop10 color66 size26rpx">
					<view >1.活动要求：完成订单必须是有效订单，超时、差评、投诉、刷单及其他重大违规行为不计入完成订单中；</view>
					<view> 2.活动时间：2020.12.20-2021.02.28（超过活动时间的订单不计入奖励）；</view>
					<view>3.奖励发放：完成相应订单量后，对应奖励将于次日凌晨零点之后发放到账户余额；</view>
					<view>4.奖励查看：打开APP点击左侧菜单栏邀请有礼→累积总收入即可查看奖励明细；</view>
					<view>5.邀请方式：通过APP邀请有礼进行微信好友分享、面对面分享、微信朋友圈分享后，好友扫码注册，并通过手机应用商店下载APP上传身份证、开通接单权限开始接单才算邀请成功，完成相应单量才有奖励；</view>
					<view>6.通过非正常途径获得的奖励无效，活动期间因其他违规行为导致账号关闭，本活动的奖励也将不予发放；</view>
					<view>7.若收入达到征收个人所得税的额度，税额将由平台代扣；</view>
					<view> 8.本活动最终解释权归平台人事部所有，如有疑问可咨询17785148640（李小姐）。</view>
				</view>
			</view>
			<!-- end -->
			<view class="invit_he marTop20">
				<view class="invit_he_shou">
					<view class="dis" style="padding: 45rpx 85rpx;">
						<view class="center">
							<view>
								<label style="font-size: 50rpx;color: #fa782c;">{{num || 0}}</label>
								<label>位</label>
							</view>
							<view class="color33 marTop30">已邀请</view>
						</view>
						<view class="center">
							<view>
								<label style="font-size: 50rpx;color: #fa782c;">{{price || 0}}</label>
								<label>元</label>
							</view>
							<view class="color33 marTop30">累计总收入</view>
						</view>
					</view>
					<view class="center">
						<view class="color33 marTop30 size26rpx" style="margin-bottom: 30rpx;">
							已有
							<label style="color: #fa782c;">151331</label>
							人参与邀请
						</view>
						<view class="marTop30" style="
							width: 200rpx;
							height:70rpx; 
							line-height: 70rpx;
							color: #FFFFFF;
							border-radius: 40rpx;
							text-align: center;
							margin: 0 auto;
							background-color: #fa782c;">去提现</view>
					</view>
					<view class=""></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//邀请人数
				num:'',
				//累计收入
				price:''
			}
		},
		methods: {
			//返回首页
			home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//返回上一页
			getBack(){
				this.$mHelper.back(1)
			},
			
		}
	}
</script>

<style lang="scss">
	.wx{
		width: 120rpx;
		height: 120rpx;
		margin-left: 45rpx;
	}
	.contacButton {
	  background-color: #ffffff;
	  padding: 0;
	  margin: 0;
	  font-size: inherit;
	  color: #333333;
	}
	 
	.contacButton::after {
	  border: #FFF solid;
	}
	.invit{
		position: relative;
		width: 100%;
		background-size: 100% 100%;
		height: 130vh;
		background-repeat: no-repeat;
		background-image: url("");
		image{
			width: 100%;
		}
	}
	.invit_with{
		width: 100%;
		padding: 25rpx;
		z-index: 1000;
		position: absolute;
		background-color: #f9772b;
		margin-top: -430rpx;
		.invit_he{
			background: #ffffff;
			border-radius: 10rpx;
			padding: 25rpx;
		}
	}
</style>
